import React from 'react';
import {connect} from 'dva';
import {Form, Row, Col, DatePicker, Table, Pagination, Input, Button, Select} from 'antd';

const dateFormat = "YYYY-MM-DD";
const {RangePicker} = DatePicker;
const FormItem = Form.Item;
const R = require("ramda");
const Option = Select.Option;

const forexReport = Form.create()(class ForexReport extends React.Component {
    constructor(props) {
        super(props)
    }

    columns = [
        {title: "收汇日期", dataIndex: 'rectime', key: 'rectime'},
        {title: "收汇金额", dataIndex: 'recamount', key: 'recamount'},
        {title: "付汇人", dataIndex: 'payman', key: 'payman'},
        {title: "付汇账号", dataIndex: 'payaccount', key: 'payaccount'},
        {title: "收汇类型", dataIndex: 'settlement', key: 'settlement'},
        {title: "收款账号", dataIndex: 'recaccount', key: 'recaccount'},
        {title: "结汇时间", dataIndex: 'exchangetime', key: 'exchangetime'},
        {title: "银行端结汇汇率", dataIndex: 'bankexchangerate', key: 'bankexchangerate'},
        {title: "银行端结汇金额", dataIndex: 'bankexchangeamount', key: 'bankexchangeamount'},
        {title: "客户端结汇汇率", dataIndex: 'cstexchangerate', key: 'cstexchangerate'},
        {title: "客户端结汇金额", dataIndex: 'cstexchangeamount', key: 'cstexchangeamount'},
        {title: "客户认领金额", dataIndex: 'claimamount', key: 'claimamount'},
        {title: "认领客户", dataIndex: 'companyname', key: 'companyname'},
        // {title:"客户认领结汇金额",dataIndex:'cstclaimamount',key:'cstclaimamount'},
        {title: "币种", dataIndex: 'recamountunit', key: 'recamountunit'},
        {title: "状态", dataIndex: 'status', key: 'status'},
        {title: "创建人", dataIndex: 'username', key: 'username'},
        {title: "创建时间", dataIndex: 'createtime', key: 'createtime'},
    ];


    handleSearch = () => {
        let values = this.props.form.getFieldsValue();
        let status = values.status;
        let times = values.timeRange;
        this.props.dispatch({
            type: "forexReport/getForexList",
            payload: {
                beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                status: R.isNil(status) ? null : status,
            }
        })

    }

    handleExport = () => {
        let values = this.props.form.getFieldsValue();
        let times = values.timeRange;
        let status = values.status;
        this.props.dispatch({
            type: "forexReport/exportForexList",
            payload: {
                beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                status: R.isNil(status) ? null : status,

            }
        })
    }


    render() {

        let pagination = {

            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.forexReport.page.size,
            total: this.props.forexReport.page.totalRow,
            showSizeChanger: true,
            current: this.props.forexReport.page.page,
            onShowSizeChange: (current, size) => {
                let values = this.props.form.getFieldsValue();
                let times = values.timeRange;
                let status = values.status;
                let newPage = this.props.forexReport.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'forexReport/getForexList',
                    payload: {
                        beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                        endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                        status: R.isNil(status) ? null : status,
                        page: newPage,
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let values = this.props.form.getFieldsValue();
                let times = values.timeRange;
                let newPage = this.props.forexReport.page;
                let status = values.status;
                newPage.page = pageNumber;
                newPage.pageSize = pageSize;
                this.props.dispatch({
                    type: 'forexReport/getForexList',
                    payload: {
                        beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                        endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                        status: R.isNil(status) ? null : status,
                        page: newPage,
                    }
                });
            }


        };
        let dataSource = R.isNil(this.props.forexReport.forexList) ? null : this.props.forexReport.forexList;
        const {getFieldDecorator} = this.props.form;
        let formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 18}};
        return (
            <Form>
                <Row>
                    <Col span={6}>
                        <FormItem span={6} {...formItemLayout} label="收汇时间">
                            {getFieldDecorator("timeRange", {
                                initialValue: null,
                            })(
                                <RangePicker
                                    style={{width: 230}}
                                    showTime={{format: 'YYYY-MM-DD'}}
                                    format="YYYY-MM-DD"
                                    placeholder={['开始时间', '结束时间']}
                                />
                            )
                            }
                        </FormItem>
                    </Col>
                    <Col span={4}>
                        <FormItem {...formItemLayout} span={6} label="状态">
                            {getFieldDecorator("status", {})(
                                <Select style={{width: 120}}>
                                    <Option value={null}>（空）</Option>
                                    <Option value="1">待结汇</Option>
                                    <Option value="2">待认领</Option>
                                    <Option value="3">待复核</Option>
                                    <Option value="4">已确认</Option>
                                    <Option value="5">复核不通过</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" icon="search" onClick={this.handleSearch.bind(this)}>查询</Button>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" onClick={this.handleExport.bind(this)}>导出数据</Button>
                    </Col>
                </Row>
                <Row>
                    <Table dataSource={dataSource} pagination={pagination} columns={this.columns} loading={this.props.loading} size={'middle'} bordered={true} scroll={{x: 1700}}/>
                </Row>

            </Form>

        )
    }
})


function mapStateToProps(state) {
    return {
        loading: state.loading.models.forexReport, forexReport: state.forexReport
    };
}

export default connect(mapStateToProps)(forexReport);